<template>
  <div
    class="header"
    :style="{
      backgroundColor: bgColor,
    }"
  >
    <!-- 时钟 -->
    <div class="timeblock">{{ clock.date }} {{ clock.time }}</div>
    <!-- 标题 -->
    <div
      class="title"
      :style="{
        color: fontColor,
      }"
    >
      {{ title }}
    </div>
    <!-- 控制台 -->
    <div class="kzt" @click.stop="goHome"
      ><a-button type="link" style="color: #fff">控制台</a-button></div
    >
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  export default defineComponent({
    props: {
      title: {
        type: String,
        default: 'title',
      },
      fontColor: {
        type: String,
        default: '#fff',
      },
      bgColor: {
        type: String,
        default: '',
      },
      headerBgImg: {
        type: String,
        default: 'header1',
      },
    },
    setup() {
      const router = useRouter(); // 第一步
      const clock = reactive({
        time: '',
        date: '',
      });

      var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      setInterval(updateTime, 1000);
      updateTime();
      function updateTime() {
        var cd = new Date();
        clock.time =
          zeroPadding(cd.getHours(), 2) +
          ':' +
          zeroPadding(cd.getMinutes(), 2) +
          ':' +
          zeroPadding(cd.getSeconds(), 2);
        clock.date =
          zeroPadding(cd.getFullYear(), 4) +
          '-' +
          zeroPadding(cd.getMonth() + 1, 2) +
          '-' +
          zeroPadding(cd.getDate(), 2) +
          ' ' +
          week[cd.getDay()];
      }

      function zeroPadding(num, digit) {
        var zero = '';
        for (var i = 0; i < digit; i++) {
          zero += '0';
        }
        return (zero + num).slice(-digit);
      }

      function goHome() {
        router.push({
          path: '/system/analysis',
        });
      }

      return {
        clock,
        goHome,
      };
    },
  });
</script>

<style lang="less" scoped>
  .header {
    width: 100%;
    height: 50px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('/src/views/largeData/com/image/nlogo.png');
    margin-bottom: 19px;
    position: relative;
    color: #fff;
    font-family: PingFangSC, PingFangSC-Semibold;
    .title {
      font-size: 24px;
      margin-bottom: 6px;
    }
    .timeblock {
      position: absolute;
      left: 11px;
      top: 38px;
      font-weight: 500;
      font-size: 12px;
    }
    .kzt {
      font-size: 12px;
      font-weight: 500;
      position: absolute;
      right: 11px;
      top: 38px;
      font-weight: 500;
      cursor: pointer;
      z-index: 99;
    }
  }
</style>
